<template>
  <view 
    class="result-custom-page"
    :style="{backgroundImage:'url('+staticImgs.topBg+')'}"
    v-if="isLoadOk"
  >
    <view class="base-info-wrapper">
      <view class="num-box">测评报告编号：{{report.serialNumber}}</view>
      <view class="name-box">
        {{report.name}}
      </view>
      <view class="conclusion-box">
        <view class="tit">{{report.conclusion}}</view>
        <view class="label">
          报告结果
        </view>
        <view class="time">测评时间：{{scl.dateTime}}</view>
      </view>
    </view>
    
    <view class="data-conclusion-box" v-if="report.scoreArr">
      <view class="label-wrapper">
        <view class="text col-1">维 度</view>
        <view class="text col-2">我的指标</view>
        <view class="text col-3">健康指标</view>
      </view>
      
      <view class="data-wrapper">
        <view :class="[index === 0 ? 'head-row' : 'row']" v-for="(item,index) in report.scoreArr" :key="index">
          <view class="col-1">
            <text class="text">{{item.label}}</text>
            <!-- <template v-if="index != 0"> -->
              <text class="colon">:</text>
            <!-- </template> -->
          </view>
          <view class="col-2" >
            <text class="num" v-show="item.score">{{item.score}}</text>
          </view>
          <view class="col-3">{{item.str}}</view>
          <view class="col-4">{{item.commonInfo}}</view>
        </view>
      </view>
    </view>
    
    <template v-if="showProgressComp">
      <view class="dashed-line"></view>
      <view class="progress-box">
        <BlockTit tit="测度值" />
        <view class="progress-comp">
          <image class="bg" :src="progressBgImg" mode=""></image>
          <view class="point-comp" :style="{'transform':'rotateZ('+ progressAngle +'deg)'}">
            <image class="point" :src="staticImgs.point" mode=""></image>
          </view>  
          <view class="num-1">0</view>
          <view class="num-2">25</view>
          <view class="num-3">50</view>
          <view class="num-4">75</view>
          <view class="num-5">100</view>
        </view>
      </view>
    </template>
    
    <template v-if="report.normComparison">
      <view class="dashed-line"></view>
      <view class="norm-comparison-box">
        <BlockTit tit="常模对比" />
        <view class="tit">{{report.normComparison.tit}}</view>
        <view class="legend-wrapper">
          <view class="legend">
            <image :src="report.normComparison.url" mode=""></image>
          </view>
          
         <view class="annotation-wrapper">
           <view class="annotation-box" v-for="(item,index) in report.normComparison.legend">
             <view class="icon" :style="{'background':item.color}"></view>
             <view class="text">{{item.label}}</view>
           </view> 
            <!-- <view class="annotation-box">
              <view class="icon" style="background: #A09FF2;"></view>
              <view class="text">无抑郁</view>
            </view>
            <view class="annotation-box">
              <view class="icon" style="background:linear-gradient(180deg, #FFC48B 0%, #FF9868 100%);"></view>
              <view class="text">轻度抑郁</view>
            </view>
            <view class="annotation-box">
              <view class="icon" style="background: #9CB9FB;"></view>
              <view class="text">中度抑郁</view>
            </view>
            <view class="annotation-box">
              <view class="icon" style="background: #718BE4;"></view>
              <view class="text">重度抑郁</view>
            </view> -->
          </view>
          
          <view class="summary-wrapper" v-if="report.normComparison.p">
            <view class="p">{{report.normComparison.p}}</view>
          </view>
        </view>      
      </view>
    </template>

    <template v-if="report.detailedResults">
      <view class="dashed-line"></view>
      <view class="detailed-results-box">
        <BlockTit tit="结果详解" />
        <view class="summary-wrapper">
          <view class="tit">{{report.detailedResults.tit}}</view>
          <view class="p">{{report.detailedResults.p}}</view>
        </view>
        
        <template v-for="(item,index) in report.detailedResults.contentArr">
          <view class="block">
            <view class="sub-tit">{{item.tit}}</view>
            <view class="p">{{item.p}}</view>
          </view>
          <view class="dashed-line"></view>
        </template>
      </view>
    </template>
    
    <template v-if="report.sciencePopularization">
      <view class="science-popularization-box">
        <BlockTit tit="知识科普" />
        <view class="summary-wrapper">
          <view class="img">
            <image :src="staticImgs.resultImg1" mode=""></image>
          </view>
          <view class="p" v-if="report.sciencePopularization.p">
            {{report.sciencePopularization.p}}
          </view>
          <view class="tit" v-if="report.sciencePopularization.tit">{{report.sciencePopularization.tit}}</view>
        </view>
        <template v-for="(item,index) in report.sciencePopularization.contentArr">
          <view class="block">
            <view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
            
            <view class="p" v-if="item.p">
              {{item.p}}
            </view>
            <view class="text-list" v-else-if="item.list">
                <view class="li" v-for="(subItem,subIndex) in item.list" :key="subIndex">{{subItem}}</view>
            </view>
            <template v-else-if="item.contentArr">
              <template v-for="(subItem,subIndex) in item.contentArr">
                  <view class="sub-sub-tit" v-if="subItem.tit">
                    {{subItem.tit}}
                  </view> 
                  <view class="p">
                    {{subItem.p}}
                  </view>  
              </template>
              
            </template>
          </view>
          <view class="dashed-line"></view>
        </template>
      </view>
      
    </template>

   
   <template v-if="report.suggestions">
     <view class="suggestions-box">
       <BlockTit tit="针对性小建议" />
       <view class="summary-wrapper">
         <view class="img">
           <image :src="staticImgs.resultImg2" mode=""></image>
         </view>
         <view class="p" v-if="report.suggestions.p">
           {{report.suggestions.p}}
         </view>
       </view>
       
       <template v-for="(item,index) in report.suggestions.contentArr">
         <view class="block">
           <view class="sub-tit">{{item.tit}}</view>
           <view class="p" v-if="item.p">
             {{item.p}}
           </view>
           <view class="text-list" v-else-if="item.list">
               <view class="li" v-for="(subItem,subIndex) in item.list" :key="subIndex">{{subItem}}</view>
           </view>
           <template v-else-if="item.contentArr">
             <template v-for="(subItem,subIndex) in item.contentArr">
                 <view class="sub-sub-tit">
                   （{{subIndex+1}}) {{subItem.tit}}
                 </view> 
                 <view class="p">
                   {{subItem.p}}
                 </view>  
             </template>
             
           </template>
         </view>
         <view class="dashed-line"></view>
       </template>
     </view>
   </template>
    <slot name="special" />
    <view class="references-box" v-if="referenceList.length">
      <view class="tit">参考文献</view>
      <view class="text-list">
        <view class="text" v-for="(text,index) in referenceList" :key="index">
          [{{index+1}}]{{text}}
        </view>
      </view>
    </view>
    
    <view class="report-time-box">
      <view>此测评报告仅供参考</view>
      <view>报告时间：{{report.createTime}}</view>
    </view>
  </view>
</template>

<script>
  import BlockTit from '@/subcontractorB/components/BlockTit.vue'
  export default {
    components:{
      BlockTit
    },
    props:{
      pageData:{
        type:Object,
        default:null
      },
      showCanvas:{
        type:Boolean,
        default:true
      }
    },
    data(){
      return {
        staticImgs:{
          topBg:this.imgBaseURL + '/scl/scl_result_custom_bg.png',
          resultImg1:this.imgBaseURL + '/scl/scl_result_info.png',
          resultImg2:this.imgBaseURL + '/scl/scl_result_suggestion.png',
          progressBgImg: this.imgBaseURL + '/scl/result/progress-bg.png',
          progressBgImg2:this.imgBaseURL + '/scl/result/CPSS/progress-bar.png',
          point: this.imgBaseURL + '/scl/result/progress-point-1.png',
        },
        progressBgImg:'',
        referenceList:[
          // "钱铭怡. (主编). (2006).变态心理学(pp. 135–163). 北京大学出版社.",
          // "Goldney, R. D., Fisher, L. J., Dal Grande, E., & Taylor, A. W. (2004). Subsyndromal depression:prevalence, use of health services and quality of life in an Australian population. Social Psychiatryand Psychiatric Epidemiology, 39(4)",
          // "Graber,J. A.(2013). Internalizing problems during adolescence. In M. Richard,L. S. Lerner(Eds.),Handbook of Adolescent Psychology,Second Edition. John Wiley&Sons Inc.",
          // "傅小兰、张侃.中国国民心理健康发展报告（2021—2022）[M].北京：社会科学文献出版社，2023:76-77.",
          // "王振,苑成梅,黄佳,李则挚,陈珏,张海音... & 肖泽萍.(2011).贝克抑郁量表第2版中文版在抑郁症患者中的信效度. 中国心理卫生杂志(06),476-480. doi:CNKI:SUN:ZXWS.0.2011-06-023.",
          // "American Art Therapy Association. 1996, Mission statement. Mundelein, IL: Author.",
          // "王晓歌，刘吉文，杨帅，等.运动对慢性不可预测轻度应激模型鼠抑郁样行为的干预作用：系统综述和Meta分析[J].中国组织工程研究，2023,27(05):813~820.",
          // "牛娟,刘明矾,周丽 & 杜泽楷.(2023).抑郁症患者情绪表象的特征及其机制. 中国临床心理学杂志(04),792-796+791. doi:10.16128/j.cnki.1005-3611.2023.04.006.",
          // "Huang Y,Wang Y,Wang H,et al.Prevalence of mental disorders in China:A cross-sectional epidemiological study.The Lancet Psychiatry,2019,6(3):211-224"
        ],
        isLoadOk:false,
        showProgressComp:false,
        progressAngle:10,// -90 ~ 90
        report:{
          id:'288748989898966',
          name:'贝克抑郁量表',
          conclusion: '重度抑郁',
          createTime: '2023-11-22',
          scoreArr:[
            {
              label:'抑郁程度',
              score:66,
              str: '重度抑郁',
              commonInfo: '≤13分'
            },
            {
              label:'去躯体化',
              score:40,
              str: '牛逼',
              commonInfo: '≤13分'
            }
          ],
          normComparison:{
            tit:'这是一段废话',
            img:this.imgBaseURL + '/scl/scl_result_custom_bg.png'
          },
          detailedResults:{
            tit:'重度抑郁（29~63分）',
            p:'在最近这一段时间内，你的抑郁情况非常严重，必须尽快与专业人员进行沟通并采取相应措施。',
            contentArr:[
              {
                tit: '「在情绪方面」',
                p: '你总是会感到心情压抑、郁闷、沮丧，情绪低下、心境恶劣；仿佛对很多事情都丧失了兴趣；常常感到疲惫无力，对前途悲观失望；精神创伤常盘踞在脑中，以致精神不振，脑力迟钝，为此感到羞愧。'
              }
            ]
          },
          
          sciencePopularization:{
            tit:'如何区分抑郁情绪、抑郁状态和抑郁',
            p:'',
            contentArr: [
              {
                tit:'「定义上」',
                p:' 抑郁情绪是一种使个体感到悲伤或不愉快的情绪(Graber, 2013)，是指个体在最近经历了一些应激性事件后出现的抑郁反应(钱铭怡,2006)；抑郁状态是指个体可能存在部分的抑郁症状，损害了部分的社会功能，但没有完全达到临床上抑郁症的诊断标准（Goldney et al., 2004)；抑郁症又称为重度抑郁障碍，是一种以持续的心境低落和快感缺失为主要症状的心境障碍（牛娟 等，2023），必须要寻求心理医生专业治疗。'
              },
              {
                tit: '「缓解难度」',
                list: [
                  '抑郁情绪：可自行缓解',
                  '抑郁状态：接受专业帮助后较容易缓解',
                  '抑郁症：无法自行缓解，必须接受专业帮助'
                ]
              }
            ]
          },
          suggestions:{
            tit:'',
            p:'您有重度的抑郁问题，除了接受专业干预外，您还可以运用以下方法作为辅助手段，加快恢复心理健康平衡。',
            contentArr:[
              {
                tit:'「绘画」',
                p:'美国艺术治疗协会认为绘画艺术治疗是艺术作品的创造过程，是基于治疗和生活提高的理念通过非言语交际的形式表达各种思想和感情的治疗方法（American Art TherapyAssociation. ，1996），尝试绘出你的情绪，让画纸来承担你的情绪。'
              },
              {
                tit:'「音乐」',
                p:'音乐疗法在18至19世纪，第一次被当做辅助治疗用来改善人体心理及生理病理状态，当你感到情绪不佳时，听一听喜欢的音乐，它能作用于你的大脑的边缘系统和脑干网状结构，调节大脑皮质，分泌些对你有益的物质，进而调节你的情绪。'
              }
            ],
          }
        },
        scl:{
          dateTime:'2023-10-03 23:00'
        }
      }
    },
    watch:{
      pageData:{
        handler(v){
          console.log(v,'======pageDatas')
          if(v){
            console.log(this.isLoadOk,'--====this.isLoadOk')
            this.report = v
            this.scl.dateTime = v.sclTime
            this.referenceList = v.literatrue
            this.isLoadOk = true
            this.progressBgImg = this.staticImgs.progressBgImg
            if(v.scoreArr){
              this.progressAngle = this.calculateAngle(v.scoreArr[0].score)// + 5
            }
            this.showProgressComp = v.showProgressComp ? true : false
            console.log(this.progressAngle,'===this.progressAngle')
            console.log(this.isLoadOk,'--====this.isLoadOk')
          }
        },
        immediate:true,
        deep:true
      }
    },
    methods:{
      calculateAngle(inputValue) {
          // 确保输入在合理范围内
          inputValue = Math.max(0, Math.min(100, inputValue));
          // 将输入映射到[-90, 90]的范围
          var mappedValue = (inputValue / 100) * 180 - 90;
          return mappedValue;
      }
    }
  }
</script>

<style lang="scss" scoped>
  view{
    box-sizing: border-box;
    word-break: break-all;
  }
  
  .result-custom-page{
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    background-size: 750rpx 1310rpx;
    background-repeat: no-repeat;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);  
    
    
    .base-info-wrapper{
      margin: auto;
      padding: 90rpx 28rpx 80rpx 28rpx;
      .num-box{
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        color: #666666;
      }
      
      .name-box{
        margin: auto;
        margin-top: 12rpx;
        // width: 696rpx;
        width: 100%;
        height: 120rpx;
        // background: #FFFFFF;
        box-shadow: 0rpx 12rpx 20rpx 0rpx #EEF4FF;
        border-radius: 12rpx;
        // opacity: 0.6;
        background-color: rgba(255, 255, 255, .6);
        border: 3rpx solid #AAC4F9;
        
        line-height: 120rpx;
        text-align: center;
        
        font-size: 40rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #1A1B1F;
      }
      .conclusion-box{
        margin-top: 100rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        
        .tit{
          
          // font-size: 50rpx;
          font-size: 46rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #185199;
        }
        .label{
          margin-top: 20rpx;
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #333333;
          
          position: relative;
          
          &::after{
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            right: -29rpx;
            position: absolute;
          }
          &::before{
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            left: -29rpx;
            position: absolute;
          }
        }
        //.label - end
        
        .time{
          margin-top: 20rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 300;
          color: #666666;
        }
      }
    }
    // ..base-info-wrapper - end
    .data-conclusion-box{
      width: fit-content;
      margin: auto;
      .col-1{
        // width: 330rpx;
        width: 48%;
        padding-left: 30rpx;
      }
      .col-2{
        // width: 190rpx;
        width: 28%;
      }
      .col-3{
        // width: 180rpx;
        width: 24%;
        padding-right: 24rpx;
      }
      
      .label-wrapper{
        display: flex;
        width: 700rpx;
        margin: auto;
        border-bottom: 4rpx solid #333;
        padding-bottom: 16rpx;
        .text{
          font-size: 30rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          color: #333333;
        }
        
      }

      
      .data-wrapper {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-bottom: 64rpx;
          width: 710rpx;
          margin-top: 16rpx;
          // border: 1rpx solid #C1C1C1;
          box-shadow: 0px 0px 0px 0.5px #c1c1c1;
          padding-bottom: 24rpx;
      
          .head-row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 96rpx !important;
            background: rgba(211, 224, 255, .32);
            
            .col-1 {
              width: 32%;
              padding-left: 30rpx;
              
              .text {
                font-size: 36rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
                    
              .colon {
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
            }
                  
            .col-2 {
              width: 16%;
              .num {
                font-size: 46rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #6B77FF;
              }
            }
                  
            .col-3 {
              width: 28%;
              
              font-size: 36rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #EE5757;
              margin-left: 4rpx;
            }
                  
            .col-4 {
              width: 24%;
              padding-right: 24rpx;
              padding-right: 54rpx;
              text-align: right;
                  
              font-size: 36rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #393C5A;
              margin-left: 20rpx;
            }
            
          }
      
          .row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 78rpx;
            
            .col-1 {
              width: 32%;
              padding-left: 30rpx;
              
              .text {
                // font-size: 36rpx;
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
                    
              .colon {
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
            }
                  
            .col-2 {
              width: 16%;
              .num {
                // font-size: 46rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #6B77FF;
                font-size: 32rpx;
              }
            }
                  
            .col-3 {
              width: 28%;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              margin-left: 4rpx;
              font-size: 24rpx;
              color: #333333;
            }
                  
            .col-4 {
              width: 24%;
              padding-right: 24rpx;
              padding-right: 54rpx;
              text-align: right;
  
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #393C5A;
              margin-left: 20rpx;
            }
            
          }
      
      
        }
      
    }
    // .data-conclusion-box - end
    
    
    .dashed-line{
      margin: auto;
      width: 694rpx;
      height: 1rpx;
      
      background-image: repeating-linear-gradient(
          to right,
          #A9C4F2,
          #A9C4F2 10rpx,
          transparent 10rpx,
          transparent 20rpx
      );
    }
    // .dashed-line - end
    
    .progress-box{
      padding-top: 48rpx;
    }
    
    .progress-comp{
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
      
      display: flex;
      align-items: center;
      
      
      .bg{
        width: 592rpx;
        height: 320rpx;
      }
      
      .point-comp{
        position: absolute;
        bottom: 10rpx;
        left: 354rpx;
        z-index: 2;
        // transform: rotateZ(45deg);
        // transform-origin: bottom;
        transform-origin: bottom center;
        
        .point{
          margin: auto;
          width: 48rpx;
          height: 285rpx;
        }
      }
      
      .num-1,.num-2,.num-3,.num-4,.num-5{
        position: absolute;
        bottom: 0;
        font-size: 20rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #333333;
        line-height: 28rpx;
        z-index: 1;
      }
      .num-1{
        left: 230rpx;
        
      }
      .num-5{
        right: 230rpx;
      }
      .num-2{
        left: 252rpx;
        bottom: 90rpx;
      }
      .num-4{
        bottom: 90rpx;
        right: 252rpx;
      }
      .num-3{
        bottom: 130rpx;
      }
      
      
    }
    
    .norm-comparison-box{
      // margin: auto;
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .tit{
        margin: auto;
        margin-top: 60rpx;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      
      .legend-wrapper{
        .legend{
          margin: auto;
          margin-top: 80rpx;
          &,image{
            width: 472rpx;
            height: 472rpx;
            // background-color: #185199;
          }
        }
        .annotation-wrapper{
          margin-top: 60rpx;
          
          display: flex;
          align-items: center;
          padding: 0 40rpx;
          // justify-content: space-between;
          justify-content: center;
          column-gap: 40rpx;
          .annotation-box{
            display: flex;
            align-items: center;
            .icon{
              width: 16rpx;
              height: 16rpx;
              // background: #A09FF2;
              border-radius: 11rpx;
              margin-right: 6rpx;
            }
            .text{
              font-size: 24rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              color: #333333;
            }
          }
        }
      }
      //.legend-wrapper - end
      
      
    }
    // .norm-comparison-box - end
    
    .detailed-results-box{
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .summary-wrapper{
        .tit{
          
        }
      }
      
      
      
    }
    // .detailed-results-box - end
    
    .science-popularization-box{
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .summary-wrapper{
        .img{
          margin: auto;
          margin-bottom: 52rpx;
          &,image{
            width: 568rpx;
            height: 248rpx;
            // background-color: #185199;
          }
        }
        .tit{
          
        }
      }
      
    }
    // .science-popularization-box - end
    
    .suggestions-box{
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .summary-wrapper{
        .img{
          margin: auto;
          margin-bottom: 70rpx;
          &,image{
            width: 558rpx;
            height: 276rpx;
            // background-color: #185199;
          }
        }
        .tit{
          
        }
      }
    }
    // .suggestions-box - end
    
    .references-box{
      margin-top: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .tit{
        margin-left: 36rpx;
        width: fit-content;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        padding-bottom: 6rpx;
        border-bottom: 2rpx solid rgba(25, 81, 153, .3);
      }
      
      .text-list{
        margin: auto;
        margin-top: 18rpx;
        width: 675rpx;
        // height: 1416rpx;
        border: 1rpx solid #C1C1C1;
        padding: 14rpx 18rpx;
        .text{
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #666666;
          line-height: 46rpx;
          text-indent: 1.5em;
        }
      }
    }
    // .references-box -end
    .report-time-box{
      margin: auto;
      margin-top: 32rpx;
      width: 709rpx;
      border-top: 4rpx solid #666;
      padding-top: 16rpx;
      padding-bottom: 50rpx;
      padding-left: 14rpx;
      padding-right: 14rpx;
      display: flex;
      justify-content: space-between;
      
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 300;
      color: #666666;
      
    }
    
    
    
    
    .p{
      
      font-size: 32rpx;
      font-family: PingFang-SC, PingFang-SC;
      // font-weight: 500;
      color: #333333;
      line-height: 62rpx;
      text-indent: 1.5em;
      
      text-align: justify;
    }
    
    .summary-wrapper{
      padding: 0 40rpx;
      margin-top: 50rpx;
      margin-bottom: 30rpx;
      .tit{
        margin: auto;
        text-align: center;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #185199;
        margin-bottom: 50rpx;
        
      }
    }
    
    .block{
      padding: 0 40rpx;
      margin-bottom: 40rpx;
      margin-top: 28rpx;

      
      .p{
        margin-bottom: 60rpx;
      }
      
      .sub-tit{
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        margin-bottom: 18rpx;
        margin-top: 70rpx;
        // margin-left: -24rpx;
        margin-left: -4rpx;
      }
      
      .sub-sub-tit{
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #000000;
        margin-bottom: 18rpx;
      }
      
      .text-list{
        display: flex;
        flex-direction: column;
        row-gap: 16rpx;
        .li{
          width: 694rpx;
          
          // width: 592rpx;
          height: 75rpx;
          line-height: 75rpx;
          background-image: linear-gradient(270deg, rgba(238,238,238,0) 0%, rgba(245,249,255,0.4) 53%, #D8E9FF 100%);
          background-size: 592rpx 75rpx;
          background-repeat: no-repeat;
          border-radius: 2rpx;
          // opacity: 0.43;
          
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
          // font-weight: 500;
          color: #333333;
          
          padding-left: 20rpx;
        }
      }
    }
    
  }
</style>